<template>
  <view class="flex flex-wrap">
    <view class="input-container flex justify-start align-center">
      <view class="input-prefix flex align-center justify-center">
        <slot name="prefix"></slot>
      </view>
      <input
        class="input"
        :type="type"
        :placeholder="placeholder"
        :value="value"
        @input="$emit('input', $event.target.value)"
      />
      <view class="input-suffix flex align-center justify-center">
        <slot name="suffix"></slot>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    value: [Number, String],
    placeholder: {
      type: [String],
    },
    type: {
      type: [String],
      default: 'text',
    },
  },
  data() {
    return {}
  },
}
</script>

<style lang="scss" scoped>
.input-container {
  width: 630upx;
  height: 100upx;
  border-radius: 50upx;
  margin: 20upx 0;
  background: rgba(249, 250, 255, 1);
  border: 1px solid rgba(237, 239, 246, 1);

  .input-prefix {
    width: 100upx;
    height: 100upx;
    border-radius: 50upx;
    // background-color: #FFF;
  }
  .input {
    width: 430upx;
    height: 80upx;
  }
  .input-suffix {
    width: 100upx;
    height: 100upx;
    border-radius: 50upx;
    // background-color: #FFF;
  }
}
</style>
